<template>
  <div class="srb">
    <div class="container" >
      <div class="side" style="height: auto">
        <!-- 基本信息 -->
        <div class="profile info-unit">
          <h2 class="h">
            <i class="fa fa-user" aria-hidden="true"></i>基本信息<el-link icon="el-icon-edit" type="success" style="margin-left: 80px" @click="add('dialog')">编辑</el-link></h2>
          <hr/>
          <ul>
            <li>
              <label>个人信息</label>
              <span>{{name}} / {{sex}} / {{nation}}</span>
            </li>
            <li>
              <label>毕业学校</label>
              <span>{{school}}</span>
            </li>
            <li>
              <label>所学专业</label>
              <span>{{major}}</span>
            </li>
            <li>
              <label>所在班级</label>
              <span>{{cla}}</span>
            </li>
            <li>
              <label>学历</label>
              <span>{{xli}}</span>
            </li>
          </ul>
        </div>

        <!-- 联系方式 -->
        <div class="contact info-unit">
          <h2 class="h">
            <i class="fa fa-phone" aria-hidden="true"></i>联系方式<el-link icon="el-icon-edit" type="success" style="margin-left: 80px" @click="add('lxfs')">编辑</el-link></h2>
          <hr/>
          <ul>
            <li>
              <label>手机</label>
              <a href="#" target="_blank">{{telephone}}</a>
            </li>
            <li>
              <label>邮箱</label>
              <a href="#" target="_blank">{{email}}</a>
            </li>
          </ul>
        </div>

        <!-- 技能点 -->
        <div class="skill info-unit">
          <h2 class="h">
            <i class="fa fa-code" aria-hidden="true"></i>技能点</h2>
          <hr/>
          <ul>
            <li>
              <label>HTML</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
            <li>
              <label>CSS</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
            <li>
              <label>JavaScript</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
            <li>
              <label>React</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
            <li>
              <label>Node.js</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="60"></el-progress>
            </li>
            <li>
              <label>小程序</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
            <li>
              <label>React</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
            <li>
              <label>React</label>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
            </li>
          </ul>
        </div>
      </div>


      <div class="srcmain">
        <!-- 教育经历 -->
        <div class="edu info-unit">
          <h2 class="h">
            <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历<el-link icon="el-icon-edit" type="success" style="margin-left: 80%" @click="add('edu')">编辑</el-link></h2>
          <hr/>
          <span v-html="educational"></span>
        </div>

        <!-- 工作经历 -->
        <div class="work info-unit">
          <h2 class="h">
            <i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历<el-link icon="el-icon-edit" type="success" style="margin-left: 80%" @click="add('gzjl')">编辑</el-link></h2>
          <hr/>
          <span v-html="experience"></span>
        </div>

        <!-- 项目经验 -->
        <div class="project info-unit">
          <h2 class="h">
            <i class="fa fa-terminal" aria-hidden="true"></i>个人技能 <el-link icon="el-icon-edit" type="success" style="margin-left: 80%" @click="add('grjl')">编辑</el-link></h2>
          <hr/>
          <span v-html="skills"></span>
        </div>
        <!-- 自我评价 -->
        <div class="work info-unit">
          <h2 class="h">
            <i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望<el-link icon="el-icon-edit" type="success" style="margin-left: 76%" @click="add('eva')">编辑</el-link></h2>
          <hr/>
          <span v-html="evaluation"></span>

        </div>
      </div>
    </div>
    <el-dialog title="编辑个人信息" :visible.sync="grinfo_state" style="width: 900px;padding-left: 26%">
      <el-form ref="form" :model="user_form" label-width="80px">
        <el-form-item label="姓名">
          <el-input
              style="width: 200px"
              v-model="user_form.name"
              placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="名族">
          <el-input
              style="width: 200px"
              v-model="user_form.nation"
              placeholder="请输入名族"
          ></el-input>
        </el-form-item>
        <el-form-item label="毕业学校">
          <el-input
              style="width: 200px"
              v-model="user_form.stu"
              placeholder="请输入毕业学校"
          ></el-input>
        </el-form-item>
        <el-form-item label="所学专业">
          <el-input
              style="width: 200px"
              v-model="user_form.major"
              placeholder="请输入所学专业"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在班级">
          <el-input
              style="width: 200px"
              v-model="user_form.cla"
              placeholder="请输入所在班级"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历">
        <el-select v-model="value" placeholder="请选择学历">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="user_form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('add')"
              v-show="password_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑联系方式" :visible.sync="lxfs_state" style="width: 900px;padding-left: 26%">
      <el-form ref="form" :model="user_form" label-width="80px">
        <el-form-item label="电话">
          <el-input
              style="width: 200px"
              v-model="user_form.tel"
              placeholder="请输入电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
              style="width: 200px"
              v-model="user_form.email"
              placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('lxfsadd')"
              v-show="lxfs_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑工作经历" :visible.sync="gzjl_state" >
      <el-form ref="form" :model="user_form" label-width="80px">
        <vTinymce v-model="editor_content" />
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('gzjladd')"
              v-show="gzjl_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑个人技能" :visible.sync="grjl_state" >
      <el-form ref="form" :model="user_form" label-width="80px">
        <vTinymce v-model="editor_content" />
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('grjladd')"
              v-show="grjl_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑自我评价" :visible.sync="eva_state" >
      <el-form ref="form" :model="user_form" label-width="80px">
        <vTinymce v-model="editor_content" />
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('evaadd')"
              v-show="eva_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑教育经历" :visible.sync="edu_state" >
      <el-form ref="form" :model="user_form" label-width="80px">
        <vTinymce v-model="editor_content" />
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('eduadd')"
              v-show="edu_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "StudentInfoSapce",
  data(){
    return{
      editor_content:"",
      uid:"",
      name:'',
      awards:'',
      cla:'',
      department:'',
      email:'',
      telephone:'',
      xli:'',
      sex:'',
      nation:'',
      school:'',
      major:'',
      experience:'',
      skills:'',
      evaluation:'',
      educational:'',
      grinfo_state: false,
      lxfs_state: false,
      gzjl_state:false,
      edu_state:false,
      gzjl_input_state:false,
      lxfs_input_state: false,
      edu_input_state: false,
      password_input_state: false,
      eva_input_state: false,
      grjl_state : false,
      eva_state : false,
      grjl_input_state : false,
      selection_button_title: "未选择数据",
      selection_button_state: true,
      selection_data: [],
      dialog_title: "",
      user_form: {
        name: "",
        sex: "",
        cla: "",
        nation:"",
        stu:"",
        major:"",
        email:"",
        tel:""
      },
      options: [{
        value: '本科',
        label: '本科'
      }, {
        value: '研究生',
        label: '研究生'
      }, {
        value: '硕士',
        label: '硕士'
      }, {
        value: '博士',
        label: '博士'
      }],
      value: '',
      user_data: [],
    }
  },
  mounted() {
   this.selectStuInfo();
    if(this.skills == null || this.experience == null || this.educational == null || this.educational == null){
      this.$notify({
        title: "完善信息",
        message: "您的信息还未完善，请尽快完善你的信息",
        duration: 0,
      });
    }

  },
  methods:{
    selectStuInfo(){
      //发送请求
      this.$axios({
        url: this.$axios.defaults.baseURL+"/student/studentinfo",
        method: "get",
        params:{
          uid:sessionStorage.getItem("studentuid")
        }
      }).then(res => {
        this.name = res.data.name;
        this.sex = res.data.sex;
        this.nation = res.data.nation;
        this.school = res.data.school;
        this.major = res.data.major;
        this.telephone = res.data.telephone;
        this.email = res.data.email;
        this.experience = res.data.experience;
        this.skills = res.data.skills;
        this.evaluation = res.data.evaluation;
        this.xli = res.data.xli;
        this.cla = res.data.cla;
        this.uid = res.data.uid;
        this.educational = res.data.educational;
      })
    },
    add(key) {
      switch (key) {
        case "dialog":
          this.user_form.name = this.name;
          this.user_form.sex = this.sex;
          this.user_form.nation = this.nation;
          this.user_form.cla = this.cla;
          this.user_form.stu = this.school;
          this.user_form.major = this.major;
          this.value = this.xli;
          this.grinfo_state = true;
          this.password_input_state = true;
          break;
        case "add":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatastuinfo",
            method: "post",
            params:{
              name:this.user_form.name,
              nation:this.user_form.nation,
              sex:this.user_form.sex,
              school:this.user_form.stu,
              major:this.user_form.major,
              xli:this.value,
              cla:this.user_form.cla,
              uid:this.uid,
              type:"stuinfo"
            }
          }).then(res => {
            if(res.status){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.grinfo_state = false;
              this.password_input_state = false;
              this.selectStuInfo();
            }, 1500);
          })
          break;
        case "lxfs":
          this.user_form.tel = this.telephone;
          this.user_form.email = this.email;
          this.lxfs_state = true;
          this.lxfs_input_state = true;
        break;
        case "lxfsadd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatastuinfo",
            method: "post",
            params:{
              email:this.user_form.email,
              telephone:this.user_form.tel,
              uid:this.uid,
              type:"lxfsinfo"
            }
          }).then(res => {
            if(res.status){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.lxfs_state = false;
              this.lxfs_input_state = false;
              this.selectStuInfo();
            }, 1500);
          })
          break;
        case "gzjl" :
          this.editor_content = this.experience;
          this.gzjl_state = true;
          this.gzjl_input_state = true;
          break;
        case "gzjladd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatastuinfo",
            method: "post",
            params:{
              experience:this.editor_content,
              uid:this.uid,
              type:"gzjlinfo"
            }
          }).then(res => {
            if(res.status){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.gzjl_state = false;
              this.gzjl_input_state = false;
              this.selectStuInfo();
            }, 1500);
          })
          break;
        case "grjl" :
          this.editor_content = this.skills;
          this.grjl_state = true;
          this.grjl_input_state = true;
          break;
        case "grjladd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatastuinfo",
            method: "post",
            params:{
              skills:this.editor_content,
              uid:this.uid,
              type:"grjninfo"
            }
          }).then(res => {
            if(res.status){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.grjl_state = false;
              this.grjl_input_state = false;
              this.selectStuInfo();
            }, 1500);
          })
          break;
        case "eva" :
          this.editor_content = this.evaluation;
          this.eva_state = true;
          this.eva_input_state = true;
          break;
        case "evaadd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatastuinfo",
            method: "post",
            params:{
              evaluation:this.editor_content,
              uid:this.uid,
              type:"evainfo"
            }
          }).then(res => {
            if(res.status){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.eva_state = false;
              this.eva_input_state = false;
              this.selectStuInfo();
            }, 1500);
          })
          break;
        case "edu" :
          this.editor_content = this.educational;
          this.edu_state = true;
          this.edu_input_state = true;
          break;
        case "eduadd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatastuinfo",
            method: "post",
            params:{
              educational:this.editor_content,
              uid:this.uid,
              type:"eduinfo"
            }
          }).then(res => {
            if(res.status){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.edu_state = false;
              this.edu_input_state = false;
              this.selectStuInfo();
            }, 1500);
          })
          break;
      }
    },
  }

}
</script>

<style scoped>
@import "../../../assets/css/studentinfosrc.css";
@import "../../../assets/css/typosrc.css";
</style>